<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.login">
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{ user.login }}</p>
        </div>
        <!-- 展示欢迎词 -->
        <h1 v-show="info.isFirst">欢迎使用！</h1>
        <!-- 展示加载中 -->
        <h1 v-show="info.isLoading">加载中....</h1>
        <!-- 展示错误信息 -->
        <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
    </div>
</template>

<script>

export default {
  name: 'List',
  data () {
    return {
      info: {
        isFirst: true,
        isLoading: false,
        errMsg: '',
        users: []
      }
    }
  },
  mounted () {
    this.$bus.$on('updateListData', (dataObj) => {
      console.log('这里是List组件，收到了数据', dataObj)
      this.info = dataObj
    })
  }
}
</script>

<style scoped>
.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列，每列宽度相等 */
  gap: 10px 0; /* 行与行之间相距10px，列与列之间无间距 */
  padding: 10px; /* 容器内边距，用于确保内容与视口边缘有间距 */
}

.card {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* 确保padding不影响元素大小 */
}

/* 为了让每行之间有10px的垂直间距，可以使用额外的行间距 */
.row::before,
.row::after {
    content: "";
    grid-column: span 4; /* 跨越所有列 */
    height: 0;
}

/* 响应式处理：当屏幕宽度小于某个阈值时，调整列数 */
@media (max-width: 768px) {
    .row {
        grid-template-columns: repeat(2, 1fr); /* 调整为2列 */
    }
}

@media (max-width: 480px) {
    .row {
        grid-template-columns: 1fr; /* 调整为1列 */
    }
}

.card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
}

.card-text {
    font-size: 85%;
}
</style>
